<template>
  <view class="controller">
    <image src="@/static/goodDetail/decrease.png" @click="decrease"></image>
    <input type="number" v-model="value" maxlength="4">
    <image src="@/static/goodDetail/increase.png" @click="increase"></image>
  </view>
</template>
<script setup>
import { computed, defineEmits } from 'vue'
const emit = defineEmits(['update:modelValue'])
const props = defineProps({
  modelValue: [String, Number]
})
const value = computed({
  get: () => props.modelValue,
  set: (val) => {
    emit('update:modelValue', val)
  }
})
function decrease () { // 递减
  if (props.modelValue > 0) {
    emit('update:modelValue', props.modelValue - 1)
  }
}
function increase () { // 递增
  emit('update:modelValue', props.modelValue + 1)


}
</script>
<style lang="scss" scoped>
.controller {
  display: flex;
  align-items: center;

  input {
    text-align: center;
    width: 56rpx;
    height: 36rpx;
    line-height: 36rpx;
    background: #F5F5F5;
    border-radius: 8rpx;
    margin: 0rpx 8rpx;
    font-size: 20rpx;
    color: #000000;
    font-weight: bold;
  }

  image {
    width: 36rpx;
    height: 36rpx;
  }
}
</style>